var cssbtn = document.querySelector(".css-a1");
var mask = document.querySelector(".mask");
var content = document.querySelector(".content");
var add = document.querySelector(".add");
var inputs = document.querySelectorAll("input");
var userlist = document.querySelector(".userlist");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var page = 1;
var maxpage = 0;//保存总页数

//添加用户 按钮 点击事件
cssbtn.onclick = ()=>{
    mask.style.display = "block";
}
//半透明区域 点击事件
mask.onclick = (e)=>{
    mask.style.display = "none";
}
//白色区域 点击事件
content.onclick = (e)=>{
    e = e || window.event;
    e.stopPropagation();
}
//添加按钮 点击事件
add.onclick = ()=>{

    if( add.id ) //如果条件亨利, 说明当前是做 编辑操作
    {
        //向服务器端 发起请求 /api/edit
        console.log("发起 编辑请求");
        axios.get("/api/edit", { params: { id: add.id, email:inputs[0].value,name:inputs[1].value,phone:inputs[2].value   } } ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data.userlist);
            
            //重新渲染用户列表
            render( res.data.userlist );
    
            //隐藏模态框
            mask.style.display = "none";

            //清除id
            add.id = "";
        })
    }
    else{
        console.log("发起 添加请求");
        //向服务器端 发起请求 /api/add
        axios.post("/api/add", { email:inputs[0].value,name:inputs[1].value,phone:inputs[2].value   } ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data.userlist);
            
            //重新渲染用户列表
            render( res.data.userlist );
    
            //隐藏模态框
            mask.style.display = "none";
        })
    }
    


    
    
}

//封装 渲染用户列表的函数
function render( userlist ){
    var str = userlist.map((item,index)=>{
        return `<div class="css-w2">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>编辑2</li>
                    <li>是</li>
                    <li><a href="">正常</a></li>
                    <li><a href="javascript:;" class="editicon" id="${item.id}" ><svg   viewBox="0 0 1024 1024" version="1.1"  p-id="5504" width="20" height="30"><path d="M732 174.4l117.7 117.7c9.9 9.9 9.9 26.2 0 36l-41 41c-9.9 9.9-26.2 9.9-36 0L655.2 251.4c-9.9-9.9-9.9-26.2 0-36l41-41c9.8-9.9 26-9.9 35.8 0zM616.9 289.7l117.7 117.7c9.9 9.9 9.9 26.2 0 36L425.8 752.2c-9.9 9.9-26.2 9.9-36 0L272 634.4c-9.9-9.9-9.9-26.2 0-36l308.8-308.8c9.9-9.9 26.1-9.9 36.1 0.1zM232.4 674l117.8 117.8c9.9 9.9 9.9 26.2 0 36L212 849.6c-9.9 9.9-26.2 9.9-36 0l-1.8-1.8c-9.9-9.9-9.9-26.2 0-36L196.4 674c9.9-9.9 26.2-9.9 36 0z" fill="#1296db" p-id="5505"></path></svg></a> <a  href="javascript:;" class="deleteicon" id="${item.id}"><svg t="1638251383413"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2284" width="20" height="26"><path d="M92.748283 203.507071h838.503434v44.140606H92.748283zM644.402424 115.238788v44.127677h44.127677V115.238788c0-24.384646-19.75596-44.127677-43.998384-44.127677h-265.050505a43.97899 43.97899 0 0 0-31.172525 12.916364 43.918222 43.918222 0 0 0-12.825859 31.211313v44.127677h44.127677V115.238788h264.791919z m0 0" p-id="2285" fill="#1296db"></path><path d="M203.073939 909.614545v-661.979798H158.946263V909.575758c0 24.410505 19.639596 44.179394 44.179394 44.179394h617.761616c24.410505 0 44.179394-19.639596 44.179394-44.179394V247.634747H820.926061v661.979798H203.073939z m0 0" p-id="2286" fill="#1296db"></path><path d="M313.412525 335.90303h44.127677V733.090909h-44.127677V335.90303z m176.523637 0h44.127676V733.090909H489.936162V335.90303z m176.523636 0h44.127677V733.090909h-44.127677V335.90303z m0 0" p-id="2287" fill="#1296db"></path></svg></a></li>
                </div>`;
    }).join("")

    document.querySelector(".userlist").innerHTML = str;
}

//向服务器端 发起请求 /api/list , 获取服务端现有的所有用户数据
axios.get("/api/list2",{ params:{page:page} }).then((res)=>{
        
    //获取到最新的 服务端 返回的所有用户数据,
    console.log('服务端返回的数据',res.data);
    
    //重新渲染用户列表
    render( res.data.userlist );

    //保存总页数
    maxpage = Math.ceil( res.data.total / 10 );
})

//给所有用户的公共父标签 添加点击事件
userlist.onclick = (e)=>{
    e = e || window.event;
    var ele = e.target || e.srcElement;
     
    if(ele.nodeName == 'svg'){
        ele = ele.parentNode 
    } 
    else if( ele.nodeName == 'path' ){
        ele = ele.parentNode.parentNode  
    }

    if( ele.nodeName == "A" && ele.className == "deleteicon" ){ //点击的是 删除图标
        //向服务器端 发起请求 /api/delete
        axios.post("/api/delete",  { id: ele.id }  ).then((res)=>{
            
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data.userlist);
            
            //重新渲染用户列表
            render( res.data.userlist );
        })
    }
    else if( ele.nodeName == "A" && ele.className == "editicon" ){ //点击的是 编辑
        console.log("点了编辑按钮");
        //回显数据
        axios.get("/api/user/"+ele.id ).then((res)=>{

            inputs[0].value = res.data.user.email;
            inputs[1].value = res.data.user.name;
            inputs[2].value = res.data.user.phone;
            inputs[3].id = res.data.user.id;

            //显示表单
            mask.style.display = "block";
        })
        
    }
}

//给下一页绑定 点击事件
next.onclick = ()=>{
    //当前页码 小于 最大页码 
    if( page < maxpage ){
        
        console.log("发请求, 获取下一页的数据");
        axios.get("/api/list2", { params:{ page:++page } }  ).then((res)=>{
    
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data);
            
            //重新渲染用户列表
            render( res.data.userlist );
    
        })
    }
    
}
//给上一页绑定 点击事件
prev.onclick = ()=>{
    //当前页码 小于 最大页码 
    if( page > 1 ){
        
        console.log("发请求, 获取下一页的数据");
        axios.get("/api/list2", { params:{ page:--page } }  ).then((res)=>{
    
            //获取到最新的 服务端 返回的所有用户数据,
            console.log('服务端返回的数据',res.data);
            
            //重新渲染用户列表
            render( res.data.userlist );
    
        })
    }
    
}